<template>
  <div class="shopcar-container">
    <div class="goods-list">
      <div class="mui-card" v-for="(item,index) in car" :key='item.id'>
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <mt-switch
            v-model="$store.getters.getGoodsSelected[item.id]"
            @change="selectedChanged(item.id, $store.getters.getGoodsSelected[item.id])"
            ></mt-switch>
            <img src="../../src/images/07.jpg" alt="">
            <div class="info">
              <h3 class="title">小米手机666</h3>
              <p class="price-title">
                <span class="price">￥{{item.price}}</span>
                <shopcarnumberbox :count='item.count' :id='item.id'></shopcarnumberbox>
                <a @click.prevent="remove(item.id,index)">删除</a>
              </p>  
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 结算页面 -->
    <div class="pay">
      <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
              <p>总计（不含运费）</p>
              <p>已勾选商品 <span class="red">{{$store.getters.getAllCount}}</span> 件， 总价 <span class="red">￥{{$store.getters.getGoodsPrice}}</span></p>
            </div>
             <mt-button type="danger" class='payo'>去结算</mt-button>
					</div>
				</div>
			</div>
    </div>
  </div>
</template>
<script>
  import shopcarnumberbox from '../subcomponents/shopcarnumbox.vue'
  export default {
    data(){
      return {
        car:JSON.parse(localStorage.getItem('car') || '[]') 
      }
    },
    methods:{
      selectedChanged(id, val) {
      // 每当点击开关，把最新的 快关状态，同步到 store 中
      // console.log(id + " --- " + val);
        this.$store.commit("updateGoodsSelected", { id, selected: val });
      },
      remove(id,index){
        this.car.splice(index,1)
        this.$store.commit("removeGoods", { id });
      }
    },
    components: {
      shopcarnumberbox
    }
  }
</script>
<style lang="scss" scoped>
  .shopcar-container {
    .goods-list {
      background-color: #eee;
      .mui-card-content-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
      }
      img {
          width: 52px;
        }
      .info {
        flex-direction: column;
        justify-content: space-between;
        h3 {
          font-size: 14px;
        }
        .price-title {
          display: flex;
          justify-content: space-between;
          margin: 0;
          .price {
            font-size: 14px;
            color: red;
          }
          .mui-numbox {
              width: 100px;
              height: 20px;
              padding: 0 30px;
            }
        }
       }
    }
    .pay {
      .jiesuan{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        .red {
          font-size: 12px;
          color: red;
        }
      }
    }
  }
</style>